<template>
  <main>
    <h2>我是首页</h2>
    <ul>
      <!-- router-link: 路由入口组件，它最终在页面上是a标签，但是它不会重新访问站点 -->
      <li><router-link to="/coma">a页面</router-link></li>
      <li><router-link to="/comb">b页面</router-link></li>
      <li><router-link to="/comc/Hydra/35">c页面：params传参</router-link></li>
      <li>
        <router-link to="/comd?name=Hydra&age=35">d页面：query传参</router-link>
      </li>
      <li>
        <router-link to="/come/奉先/35?major=Web&tel=13547811112"
          >e页面：使用props接收参数</router-link
        >
      </li>
    </ul>
    <h3>动态路由参数</h3>
    <div>name: <input v-model="formData.name" /></div>
    <div>age: <input v-model="formData.age" /></div>
    <div>major: <input v-model="formData.major" /></div>
    <div>tel: <input v-model="formData.tel" /></div>
    <div><button @click="handleTo">跳转</button></div>
    <div><router-link :to="getTo()">跳转</router-link></div>
    <!-- 路由出口，用于展示路由出来的组件 -->
    <h2>路由出口</h2>
    <router-view></router-view>
  </main>
</template>
  
  <script>
export default {
  name: "App",
  data() {
    return {
      formData: {
        name: "奉先",
        age: 35,
        major: "Web",
        tel: "13547811112",
      },
    };
  },
  methods: {
    handleTo() {
      // 字符串形式
      // this.$router.push(`/come/${this.formData.name}/${this.formData.age}?major=${this.formData.major}&tel=${this.formData.tel}`);

      
      // 对象方式
      // 如果是params传参，无法通过path?的方式跟上query参数
      // this.$router.push({path: `/come/${this.formData.name}/${this.formData.age}?major=${this.formData.major}&tel=${this.formData.tel}`})

      // this.$router.push({
      //   path: `/come/${this.formData.name}/${this.formData.age}`,
      //   query: { tel: this.formData.tel, major: this.formData.major },
      // });
      // 使用了path之后，params参数失效：使用name替代
      // this.$router.push({path: "/come",params: {name:this.formData.name,age: this.formData.age},query: {tel: this.formData.tel,major: this.formData.major}})
      this.$router.push({
        name: "come",
        params: { name: this.formData.name, age: this.formData.age },
        query: { tel: this.formData.tel, major: this.formData.major },
      });
    },
    getTo() {
      return {
        name: "come",
        params: { name: this.formData.name, age: this.formData.age },
        query: { tel: this.formData.tel, major: this.formData.major },
      };
    },
  },
};
</script>
  
  <style>
* {
  padding: 0px;
  margin: 0px;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
</style>